<template>
  <div class="deviceInfo">
    <div class="mains_contain">
      <div class="back" @click="$router.go(-1)">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </div>
      <el-card class="box-card">
        <tabDeviceDetail />

      </el-card>

      <el-tabs style="margin-top: 20px" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="设备容器" name="first">
          <!-- <tabDeviceDetail /> -->
          <el-button type="primary" size="small" style="margin-bottom:20px" @click="getDevice">获取最新容器信息</el-button>
          <el-table :data="tableData" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="containerName" label="容器名称" align="center">
              <template slot-scope="{ row }">
                <span class="point" @click="containDia(row)">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="容器状态" align="center">
              <template slot-scope="{ row }">
                <span v-if="row.state=='download'" style="color:#409EFF">已下载</span>
                <span v-if="row.state=='installed'" style="color:#409EFF">已安装</span>
                <span v-if="row.state=='started'" style="color:#409EFF">已启动</span>
                <span v-if="row.state=='starting'" style="color:#409EFF">启动中</span>
                <span v-if="row.state=='running'" style="color:#409EFF">运行中</span>
                <span v-if="row.state=='stopped'" style="color:#409EFF">已停止</span>
                <span v-if="row.state=='stopping'" style="color:#409EFF">停止中</span>
                <span v-if="row.state=='uninstalled'" style="color:#409EFF">已卸载</span>
                <span v-if="row.state=='uninstalling'" style="color:#409EFF">卸载中</span>
              </template>
            </el-table-column>
            <el-table-column prop="uptime" label="容器启动时间" align="center" />
            <el-table-column prop="version" label="容器版本" align="center" />
            <el-table-column prop="fileName" label="容器镜像" align="center">
              <template slot-scope="{ row }">
                <span class="point" @click="containJx(row)">{{ row.fileName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="appNum" label="APP数量" align="center">
              <template slot-scope="{ row }">
                <span class="point" @click="applicationOpen(row)">
                  <span style="margin-right:0px">
                    {{ row.appNum }}
                  </span>
                  <span>（详情）</span>
                  <!-- <i class="el-icon-view"></i> -->

                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="{ row }">
                <el-button size="mini" type="text" icon="el-icon-edit" :disabled="row.name=='virtual_container'" @click="update(row)">修改</el-button>
                <el-button size="mini" type="text" :disabled="(row.state!='started'&&row.state!='running')||row.name=='virtual_container'" @click="stopContain(row)">停止</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="uninstallContain(row)" :disabled="(row.state!='stopped')||row.name=='virtual_container'">卸载
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-plus" :disabled="(row.state!='stopped')||row.name=='virtual_container'" @click="startContain(row)">启动</el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="设备日志" name="fourth">
          <fileUploadList />
        </el-tab-pane>
        <el-tab-pane label="故障告警" name="appAlarm">
          <appAlarm />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="showPo" v-show="dialog.visible">
      <div style="text-align: center">
        <div class="bg1">
          <div class="aaa-bgg"></div>
        </div>
        <div class="showPo_tip">
          <div class="showPo_tip_one">应用正在{{ curRemark }}中</div>
          <h3 class="showPo_tip_two">{{ curRemark }}时需要一点时间，请稍后</h3>
        </div>
        <div class="poBtnC">
          <div class="poBtn" :title="`取消${curRemark}`" @click="cancelPd">
            取消{{ curRemark }}
          </div>
        </div>
      </div>
    </div>
    <!-- 容器的 -->
    <div class="showPo" v-show="dialog.visible1">
      <div style="text-align: center">
        <div class="bg1">
          <div class="aaa-bgg"></div>
        </div>
        <div class="showPo_tip">
          <div class="showPo_tip_one">容器信息正在获取中</div>
          <h3 class="showPo_tip_two">获取时需要一点时间，请稍后</h3>
        </div>
        <!-- <div class="poBtnC">
          <div class="poBtn" :title="`取消${curRemark}`" @click="cancelPd">
            取消{{ curRemark }}
          </div>
        </div> -->
      </div>
    </div>
    <el-dialog title="容器详情" :visible.sync="dialogVisible" width="50%" top="5%" destroy-on-close :close-on-click-modal="false">
      <ul class="containUl">
        <li>
          <span>容器IP地址：</span>
          <span>{{   containerForm.ip }}</span>
        </li>
        <li>
          <span>容器使用核个数：</span>
          <span>{{   containerForm.cpuCount }}</span>
        </li>
        <li>
          <span>CPU占用率：</span>
          <span>{{   containerForm.cpuUsage }}%</span>
        </li>
        <li>
          <span>分配内存：</span>
          <span>{{   containerForm.memoryTotal }}MB </span>
        </li>
        <li>
          <span>存储空间使用量：</span>
          <span>{{   containerForm.storageUsed }}MB </span>
        </li>
        <li>
          <span>内存使用量：</span>
          <span>{{   containerForm.memoryUsed }}MB </span>
        </li>
        <li>
          <span>存储空间：</span>
          <span>{{   containerForm.storageTotal }}MB </span>
        </li>
        <li>
          <span> 技术类型：</span>
          <span>{{   containerForm.hyperv }} </span>
        </li>
      </ul>
      <div style="margin-bottom:20px">物理接口：</div>
      <el-table :data="dialogTableData" style="width: 100%" fit :max-height="500" border stripe size="mini" highlight-current-row>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="name" label="物理接口名称">
          <template slot-scope="{ row }">
            {{ row.split(':')[0] }}
          </template>
        </el-table-column>
        <el-table-column prop="nodeId" label="物理接口映射名称">
          <template slot-scope="{ row }">
            {{ row.split(':')[1] }}
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <!-- <el-button type="primary" @click="dialogVisible = false" size="small">确定</el-button> -->
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="容器镜像详情" :visible.sync="dialogVisibleDetail" width="500px" top="5%" destroy-on-close :close-on-click-modal="false">
      <ul class="containDetailUl">
        <li>
          <span>镜像名称： </span>
          <span> {{  containerName.name }} </span>
        </li>
        <li>
          <span>容器镜像版本：</span>
          <span>{{  containerName.version }} </span>
        </li>
        <li>
          <span>容器镜像大小：</span>
          <span>{{  containerName.filesize  | formatSize}} </span>
        </li>
        <li>
          <span>生厂厂家：</span>
          <span>{{  containerName.manufactor }} </span>
        </li>
        <li>
          <span>操作系统：</span>
          <span>{{  containerName.operatingSystem }} </span>
        </li>
        <li>
          <span>位数：</span>
          <span>{{  containerName.framework }} </span>
        </li>
      </ul>
      <div style="text-align: right; margin-top: 20px">
        <!-- <el-button type="primary" @click="dialogVisibleDetail = false" size="small">确定</el-button>
          <el-button @click="dialogVisibleDetail = false" size="small">取消</el-button> -->
        <el-button @click="dialogVisibleDetail = false" size="small">关闭</el-button>

      </div>
    </el-dialog>
    <el-dialog title="应用详情" :visible.sync="applicationDetail" width="80%" top="5%" destroy-on-close :close-on-click-modal="false" @close="closeApp">
      <el-form :inline="true" size="small" label-width="120px">
        <el-form-item label="app名称">
          <el-input v-model="searchForm.appName" clearable placeholder="请输入app名称" />
        </el-form-item>
        <el-form-item label="APP版本号">
          <el-input v-model="searchForm.version" clearable placeholder="请输入APP版本号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSearch" icon="el-icon-search" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="contant">
        <el-table :data="tableDataContain" style="width: 100%" fit max-height="500" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="name" label="APP名称" />
          <el-table-column prop="version" label="APP版本号" width="100" />
          <el-table-column prop="status" label="APP状态">
            <template slot-scope="{ row }">
              <span v-if="row.status=='1'" style="color:#409EFF">已停止</span>
              <span v-if="row.status=='2'" style="color:#409EFF">已启动</span>
              <span v-if="row.status=='3'" style="display: flex;align-items: center;">
                <span style="color:#409EFF;margin-right:10px">停止中</span>
                <img src="../../assets/images/ld.gif" alt="" style="width:16px;height:16px">
              </span>
              <span v-if="row.status=='4'" style="display: flex;align-items: center;">
                <span style="color:#409EFF;margin-right:10px">启动中</span>
                <img src="../../assets/images/ld.gif" alt="" style="width:16px;height:16px">
              </span>
              <span v-if="row.status=='5'" style="display: flex;align-items: center;">
                <span style="color:#409EFF;margin-right:10px">卸载中</span>
                <img src="../../assets/images/ld.gif" alt="" style="width:16px;height:16px">
              </span>

            </template>
          </el-table-column>
          <el-table-column prop="deviceSn" label="设备标识" />
          <el-table-column prop="deviceName" label="设备名称" />
          <el-table-column prop="deviceStatus" label="设备状态">
            <template slot-scope="scope">
              <span style="color: #67c23a" v-if="scope.row.deviceStatus == 'ONLINE'">在线</span>
              <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'OFFLINE'">离线</span>
              <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'WARNING'">告警</span>
              <span style="color: #e6a23c" v-if="scope.row.deviceStatus == 'INACTIVE'">未注册</span>
            </template>
          </el-table-column>
          <el-table-column prop="containerName" label="容器名称" />
          <!-- <el-table-column prop="fileName" label="安装名称" /> -->
          <el-table-column prop="containerIp" label="容器IP地址" width="100" />
          <el-table-column prop="cpuUsage" label="CUP使用率" width="120">
            <template slot-scope="{ row }">
              {{row.cpuUsage  || 0 }}%
            </template>
          </el-table-column>
          <el-table-column prop="memoryUsage" label="内存使用情况" width="120">
            <template slot-scope="{ row }">
              {{row.memoryUsage  || 0 }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" width="120" />
          <el-table-column prop="containerStorageTotal" label="存储空间（MB）" width="120" />
          <el-table-column prop="containerIoPort" label="物理接口" width="200" /> -->
          <el-table-column label="操作" width="220" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" :disabled="row.status=='1'||row.status=='3'||row.status=='4'||row.status=='5'||row.name =='RemoteService'||row.name =='MQTTIoT'||row.name =='Dongle'"
                @click="stopDevice(row)">停止</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete"
                :disabled="row.status=='2'||row.status=='3'||row.status=='4'||row.status=='5'||row.name =='RemoteService'||row.name =='MQTTIoT'||row.name =='Dongle'" @click="uninstallDevice(row)">卸载
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-plus" :disabled="row.status=='2'||row.status=='3'||row.status=='4'||row.status=='5'||row.name =='RemoteService'||row.name =='MQTTIoT'||row.name =='Dongle'" @click="startDevice(row)">启动</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: right; margin-top: 20px">
        <el-button @click="closeApp" size="small">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改容器" :visible.sync="dialogVisibleUpdate" width="40%" top="5%" destroy-on-close :close-on-click-modal="false" @close="isClose">
      <el-form ref="dialogSearchForm" label-position="left" :model="dialogSearchForm" size="small" label-width="170px" :rules="rules">
        <el-form-item label="容器名称">
          <el-input v-model="dialogSearchForm.name" clearable placeholder="请输入容器名称" disabled />
        </el-form-item>
        <el-form-item label="容器类型">
          <el-input v-model="dialogSearchForm.hyperv" clearable placeholder="请输入容器名称" disabled />
        </el-form-item>
        <el-form-item label="容器使用核个数" prop="cpuCount">
          <el-input v-model="dialogSearchForm.cpuCount" clearable placeholder="请输入容器使用核个数" />
        </el-form-item>
        <el-form-item label="CPU核掩码信息" prop="cpuMask">
          <el-input v-model="dialogSearchForm.cpuMask" clearable placeholder="请输入CPU核掩码信息" />
        </el-form-item>
        <el-form-item label="CPU的运行周期" prop="cpuPeriod">
          <el-input v-model="dialogSearchForm.cpuPeriod" clearable placeholder="请输入CPU的运行周期" />
        </el-form-item>
        <el-form-item label="CPU运行时间" prop="cpuQuota">
          <el-input v-model="dialogSearchForm.cpuQuota" clearable placeholder="请输入CPU运行时间" />
        </el-form-item>
        <el-form-item label="容器的总内存(MB)" prop="memoryTotal">
          <el-input v-model="dialogSearchForm.memoryTotal" clearable placeholder="请输入容器的总内存" />
        </el-form-item>
        <el-form-item label="容器的总存储空间(MB)" prop="storageTotal">
          <el-input v-model="dialogSearchForm.storageTotal" clearable placeholder="请输入容器的总存储空间" />
        </el-form-item>
        <el-form-item label="容器IP地址" prop="ip">
          <el-input v-model="dialogSearchForm.ip" clearable placeholder="请输入容器IP地址" />
        </el-form-item>
      </el-form>

      <div style="text-align: right; margin-top: 20px">
        <el-button type="primary" @click="updateOk" size="small">确定</el-button>
        <el-button @click="isClose" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api/link/device";
import tabDeviceShell from "./deviceInfoTabs/tabDeviceShell";
import tabDeviceDetail from "./deviceInfoTabs/tabDeviceDetail";
import tabDeviceInfo from "./deviceInfoTabs/tabDeviceInfo";
import topicList from "./deviceInfoTabs/topicList";
import deviceShadow from "./deviceInfoTabs/deviceShadow";
import fileUploadList from "../link/fileUploadList.vue";
import appAlarm from "./appAlarm.vue"
import { mapGetters } from "vuex";

// import { containerList   } from
export default {
  name: "deviceInfo",
  components: {
    tabDeviceInfo,
    topicList,
    deviceShadow,
    fileUploadList,
    tabDeviceDetail,
    tabDeviceShell,
    appAlarm
  },
  data() {
    return {
      dialogSearchForm: {},
      dialog: {
        visible: false,
        visible1: false,
      },
      curRemark: '获取',
      dialogVisible: false,
      dialogVisibleUpdate: false,
      dialogVisibleDetail: false,
      applicationDetail: false,
      deviceId: null,
      nodeId: null,
      deviceInfo: {},
      activeName: "first",
      dialogTableData: [],
      tableDataContain: [],
      searchForm: {},
      tableData: [{ index: 1 }],
      containerForm: {},
      containerName: {},
      containerId: '',
      appList: [],
      tenantId: '',
      timerStop: null,
      rules: {
        cpuCount: [{ required: true, message: "请输入容器使用核个数", trigger: "blur" }],
        cpuMask: [{ required: true, message: "请输入CPU核掩码信息", trigger: "blur" }],
        cpuPeriod: [{ required: true, message: "请输入CPU的运行周期", trigger: "blur" }],
        cpuQuota: [{ required: true, message: "请输入CPU运行时间", trigger: "blur" }],
        memoryTotal: [{ required: true, message: "请输入容器的总内存（MB）", trigger: "blur" }
        ],
        storageTotal: [{ required: true, message: "请输入容器的总存储空间（MB）", trigger: "blur" }],
        ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
      },
      ids: ''
    };
  },
  created() {
    this.deviceId = this.$route.query.deviceId;
    this.nodeId = this.$route.query.nodeId;
    this.getContainerList()
    // this.get();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == 'deviceList') {
      // let form = this.searchForm
      // localStorage.setItem('forms', JSON.stringify(form))
      next()
    } else {
      let f = localStorage.getItem('forms')
      if (f) {
        localStorage.removeItem('forms')
      }
      next()
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    //获取最新容器详情
    getDevice() {
      this.dialog.visible1 = true
      api.getDeviceNew(this.nodeId).then(res => {
        console.log(res, 'res');
        if (res.code == 200) {
          setTimeout(() => {
            this.getContainerList()
            this.dialog.visible1 = false

          }, 3000)
        }

      })
    },
    updateOk() {
      let form = Object.assign({}, this.dialogSearchForm, { id: this.ids })
      this.$refs.dialogSearchForm.validate((valid) => {
        if (valid) {
          api.containerUpdate(form).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.message
              })
              this.dialogVisibleUpdate = false
              this.dialogSearchForm = {}
            }
          })
        }
      })
    },
    isClose() {
      this.dialogVisibleUpdate = false
      this.dialogSearchForm = {}
    },
    update(row) {
      console.log('row: ', row);
      let form = Object.assign({}, row)
      this.ids = row.id
      this.dialogSearchForm = {
        name: form.name,
        hyperv: form.hyperv,
        cpuCount: form.cpuCount,
        cpuMask: form.cpuMask,
        cpuPeriod: form.cpuPeriod,
        cpuQuota: form.cpuQuota,
        memoryTotal: form.memoryTotal,
        storageTotal: form.storageTotal,
        ip: form.ip
      }
      this.dialogVisibleUpdate = true
    },
    //容器停止
    stopContain(row) {

      this.$confirm("停止该容器, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.stopContains(row.id)
        })
    },
    // 停止容器
    stopContains(id) {
      api.containerStop(id).then(res => {
        if (res.code == '200') {
          this.getContainerList()
        }
      })
    },
    //启动容器
    startContain(row) {
      this.$confirm("启动该容器, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.startContains(row.id)
        })
    },
    startContains(id) {
      api.containerStart(id).then(res => {
        if (res.code == '200') {
          this.getContainerList()
        }
      })
    },
    //卸载容器

    uninstallContain(row) {
      this.$confirm("卸载该容器, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.uninstallContains(row.id)
        })
    },
    uninstallContains(id) {
      api.containerUninstall(id).then(res => {
        if (res.code == '200') {
          this.getContainerList()
        }
      })
    },
    //停止应用
    stopDevice(row) {

      // 
      this.tenantId = row.tenantId
      this.appList = [row]
      this.$confirm("停止该应用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.stopD(row)
        })
    },
    stopD(row) {
      this.stopApp('AppStop', row)
    },
    stopApp(type, row) {
      let data = {
        ...this.appList[0],
        commandType: type,
        tenantId: this.tenantId
      }
      api.singleCommand(data).then(res => {

        if (res.code == '200') {
          this.getAppList(this.nodeId, this.containerId)
          // this.getStopAppList(res.message, row)
        }
      })
    },
    //应用启动
    startDevice(row) {
      // 
      this.tenantId = row.tenantId
      this.appList = [row]
      this.$confirm("启动该应用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.startD(row)
        })
    },
    startD(row) {
      this.startApp('AppStart', row)
    },
    startApp(type, row) {
      let data = {
        ...this.appList[0],
        commandType: type,
        tenantId: this.tenantId
      }
      api.singleCommand(data).then(res => {
        if (res.code == '200') {
          this.getAppList(this.nodeId, this.containerId)
          // this.getStopAppList(res.message, row)
        }
      })
    },
    //应用卸载
    uninstallDevice(row) {
      // 
      this.tenantId = row.tenantId
      this.appList = [row]
      this.$confirm("卸载该应用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.uninstallD(row)
        })
    },
    uninstallD(row) {
      this.uninstallDs('AppUninstall', row)
    },
    uninstallDs(type, row) {
      let data = {
        ...this.appList[0],
        commandType: type,
        tenantId: this.tenantId
      }
      api.singleCommand(data).then(res => {
        if (res.code == '200') {
          this.getAppList(this.nodeId, this.containerId)
          // this.getContainerList()
          // this.getStopAppList(res.message, row)
        }
      })
    },
    cancelPd() {

    },
    //容器列表
    getContainerList() {
      api.containerList({ deviceNodeId: this.nodeId }).then(res => {
        if (res.code == '200') {
          this.tableData = res.data
          let list = res.data
          list && list.forEach(item => {
            if (item.state == 'starting' || item.state == 'stopping' || item.state == 'uninstalling') {
              setTimeout(() => {
                this.getContainerList()
              }, 5000)
              return
            }
          })
        }
      })
    },
    handlerSearch() {
      this.getAppList(this.nodeId, this.containerId)
    },
    containDia(row) {
      console.log(row, 'row');
      // 
      this.containerForm = row
      this.dialogTableData = row.devices
      this.dialogVisible = true
    },
    applicationOpen(row) {
      let data = {
        "containerName": row.name,
        "containerHyperv": row.hyperv,
        "deviceId": this.deviceId,
        "deviceSn": this.nodeId,
        "commandType": "AppStatus",
        "tenantId": this.userInfo.userInfo.relTenantIds
      }
      this.getAppStatus(data, row)
    },
    getAppStatus(data, row) {
      api.appStatusCheck(data).then(res => {
        if (res.code == '200') {
          this.dialog.visible = true
          this.getAppStatusPoll(res.message, row)


        }
      })
    },
    getAppStatusPoll(id, row) {
      let self = this
      api.getAppId(id).then(res => {
        if (res.data == '0') {
          this.timerStop = setTimeout(() => {
            self.getAppStatusPoll(id, row)
          }, 3000)
        } else {
          this.dialog.visible = false
          this.applicationDetail = true
          window.clearTimeout(this.timerStop);
          this.timerStop = null
          this.getAppList(this.nodeId, row.id)
          this.getStopAppList(this.nodeId, row.id)
        }
      })
    },
    //点开弹出后  停止的操作
    getStopAppList(id, ids) {
      let self = this
      // api.getAppId(id).then(res => {
      //   if (res.data == '0') {
      //     this.timerStop = setTimeout(() => {
      //       self.getStopAppList(id, row)
      //     }, 3000)
      //   } else {
      //     this.getAppList(this.nodeId, row.containerId)
      //     window.clearTimeout(this.timerStop);
      //     this.timerStop = null
      //   }
      // })
      this.getAppList(this.nodeId, ids)
      this.timerStop = setTimeout(() => {
        self.getStopAppList(id, ids)
      }, 3000)

    },
    closeApp() {
      this.applicationDetail = false
      window.clearTimeout(this.timerStop);
      this.timerStop = null
    },
    cancelPd() {
      this.dialog.visible = false
      window.clearTimeout(this.timerStop);
      this.timerStop = null
    },
    getAppList(id, ids) {
      this.nodeId = id
      this.containerId = ids
      let data = {
        appName: this.searchForm.appName,
        version: this.searchForm.version,
        nodeId: id,
        containerId: ids
      }
      api.getApp(data).then(res => {
        this.getContainerList()
        this.tableDataContain = res.data
      })
    },
    containJx(row) {
      this.getFile(row.fileId)
      // this.getFile('1450728621722308609')

      this.dialogVisibleDetail = true
    },
    getFile(id) {
      api.fileName(id).then(res => {

        if (res.code == '200') {
          this.containerName = res.data
        }
      })
    },
    handleClick(tab, event) { },
  },
  destroyed() {
    window.clearTimeout(this.timerStop);
    this.timerStop = null
  }
};
</script>

<style  lang="scss" >
.deviceInfo {
  padding: 20px;
}
.containUl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  li {
    width: 25%;
    line-height: 32px;
  }
}
.containDetailUl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  li {
    width: 50%;
    line-height: 32px;
  }
}
.point {
  display: inline-block;
  height: 100%;
  width: 100%;
  cursor: pointer;
  color: #409eff;
  font-weight: bold;
  position: relative;
  i {
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 16px;
  }
}
.el-dialog__body {
  padding-top: 10px !important;
}
.showPo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 9;
}
.showPo > div {
  width: 300px;
  background: white;
  padding-bottom: 20px;
  border-radius: 20px;
}
.showPo div {
  font-size: 12px;
}

.bg1 {
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  position: relative;
}
.aaa-bgg {
  margin-top: 20px;
  background-image: url("../../assets/images/13.gif");
  width: 250px;
  height: 115px;
  background-size: 100% 100%;
}
.poBtnC {
  margin-top: 30px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  margin-bottom: 10px;
  .poBtn {
    min-width: 120px;
    padding: 0 10px;
    border-radius: 20px;
    background: #3267d5;
    color: white;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
  }
}
</style>
